<template>
	<view>
		<view class="top">
			<view class="top-box">
				<view class="top-left">
					<image :src="userData?userData.avatar :'../../static/headIcon.jpg'"></image>
					<text>{{userData?userData.nickname : ''}}</text>
				</view>
				<!-- <image  class="top-image" src="../../static/wdyj_tx.png" @click="handletixian()" mode=""></image> -->
			</view>
			<view class="top-num">
				<text class="top-num-item">嗨币总数：{{data?data.commissionSumCount:0}}</text>
				<text class="top-num-item">月嗨币总数：{{data?data.monthCommissionSumCount:0}}</text>
				<text class="top-num-item">今日嗨币：{{data?data.toDayCommissionSumCount:0}}</text>
				<!-- <view class="top-num-item">
					<text>嗨币总数：{{data?data.commissionSumCount:0}}</text>
					<text>今日嗨币：{{data?data.toDayCommissionSumCount:0}}</text>
				</view> -->
				<!-- <view class="top-num-item">
					<text>分   红：{{data?data.dividend:0}}</text>
					<text>管理奖：{{data?data.managementAward:0}}</text>
				</view> -->
			</view>
		</view>
		<!-- <view class="category">
			<view class="category-item" v-for="(item,index) in categoryList" :key="index" @click="handlecategory(index)">
				<text :class="index===categoryListIndex?'active-category-item-name':'category-item-name'">{{item}}</text>
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919967038911683.png" mode="" v-if="index==categoryListIndex"></image>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in dataList[0].list" :key="index" v-if="categoryListIndex == 0">
				<view class="list-item-top">
					<view class="list-item-top-left">
						<image :src="item.toUserAvatar"></image>
						<text>{{item.toUserNickname}}</text>
					</view>
					<text class="list-item-top-text">{{item.particularsMatter}}</text>
				</view>
				<view class="list-item-bottom">
					<text class="list-item-bottom-text">操作时间：{{item.addTime}}</text>
					<text class="list-item-bottom-text1">+{{item.amount}}元</text>
				</view>
				<view class="list-item-bottom">
					<text class="list-item-bottom-text">
						<text v-if="item.issueTime">发放时间：{{item.issueTime}}</text>
					</text>
					<text class="list-item-bottom-text1">{{item.commissionType===1?'嗨币' :item.commissionType===2?'分红' :'管理奖'}}-{{item.issueStatus===1?'已发放' :item.issueStatus===2?'发放中' :'待发放'}}</text>
				</view>
			</view>
			<view class="" v-if="categoryListIndex == 0">
				<view class="empty" v-if="dataList[0].showEmpty">
					<text>暂无数据</text>
				</view>
				<view class="loadmore" v-if="dataList[0].isLoadmore">
					<u-loadmore :status="status" :icon-type="flower"/>
				</view>
			</view>
			<view class="list-item1" v-for="(item,index) in dataList[1].list" :key="index" v-if="categoryListIndex == 1">
				<view class="list-item-left">
					<text class="list-item-left-text">提现金额：{{item.amount}}元</text>
					<text class="list-item-left-text1">{{item.addTime}}</text>
				</view>
				<text class="list-item-text">{{item.withdrawStatus===0?'待审核' :item.withdrawStatus===1?'审核中' :item.withdrawStatus===2?'微信打款中' :'审核失败'}}</text>
			</view>
			<view class="" v-if="categoryListIndex == 1">
				<view class="empty" v-if="dataList[1].showEmpty">
					<text>暂无数据</text>
				</view>
				<view class="loadmore" v-if="dataList[1].isLoadmore">
					<u-loadmore :status="status" :icon-type="flower"/>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData:'',
				categoryList:['嗨币明细','提现记录'],
				categoryListIndex:0,
				dataList:[{
					page:1,
					size:10,
					pageTotal:'',
					list:[],
					showEmpty:false,
					status: 'loading',
					isLoadmore:true,
					total:0
				},{
					page:1,
					size:10,
					pageTotal:'',
					list:[],
					showEmpty:false,
					status: 'loading',
					isLoadmore:true,
					total:0
				}],
				data:'',
				share:uni.getStorageSync('share')
			}
		},
		onShow() {
			this.dataList[1].page = 1
			//提现列表
			this.getUserWithdrawRecordsList(1)
			//嗨币信息
			this.getUserCommissionInfo()
		},
		onLoad() {
			//用户信息
			this.getUserInfo()
			//嗨币列表
			this.getUserCommissionDetailList()
			
		},
		methods: {
			//用户信息
			async getUserInfo(){
				const res = await this.$u.api.getUserInfo()
				this.userData = res.data
			},
			//嗨币列表
		    async getUserCommissionDetailList(data){
				const params = {
					page:this.dataList[0].page,
					size:this.dataList[0].size
				}
				const res = await this.$u.api.getUserCommissionDetailList(params)
				if (data==1) {
					this.dataList[0].list = res.rows
				}else{
					this.dataList[0].list = [...this.dataList[0].list,...res.rows]
				}
				this.dataList[0].pageTotal = Math.ceil(res.total/this.dataList[0].size)
				if (res.total < 10) {
					this.dataList[0].isLoadmore = false
				}
				if (res.total > 0) {
					this.dataList[0].showEmpty = false
				}else{
					this.dataList[0].showEmpty = true
				}
				this.dataList[0].status = 'nomore'
				uni.stopPullDownRefresh()
			},
			//提现列表
			async getUserWithdrawRecordsList(data){
				const params = {
					page:this.dataList[1].page,
					size:this.dataList[1].size
				}
				const res = await this.$u.api.getUserWithdrawRecordsList(params)
				if (data==1) {
					this.dataList[1].list = res.rows
				}else{
					this.dataList[1].list = [...this.dataList[1].list,...res.rows]
				}
				this.dataList[1].pageTotal = Math.ceil(res.total/this.dataList[1].size)
				if (res.total < 10) {
					this.dataList[1].isLoadmore = false
				}
				if (res.total > 0) {
					this.dataList[1].showEmpty = false
				}else{
					this.dataList[1].showEmpty = true
				}
				this.dataList[1].status = 'nomore'
				uni.stopPullDownRefresh()
			},
			//嗨币信息
			async getUserCommissionInfo(){
				const res = await this.$u.api.getUserCommissionInfo()
				this.data = res.data
			},
			//提现
			handletixian(){
				uni.navigateTo({
					url:'/pages/tixian/tixian'
				})
			},
			//选择分类
			handlecategory(index){
				this.categoryListIndex = index
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			if (this.categoryListIndex == 0) {
				this.dataList[0].page = 1
				this.getUserCommissionDetailList(1)
			}else{
				this.dataList[1].page = 1
				this.getUserWithdrawRecordsList(1)
			}
			
		},
		//向上加载
		onReachBottom() {
			if (this.categoryListIndex == 0) {
				this.dataList[0].page = this.dataList[0].page + 1
				if (this.dataList[0].page <= this.dataList[0].pageTotal) {
					this.dataList[0].isLoadmore = true
					this.dataList[0].status = 'loading';
					setTimeout(()=>{
						this.getUserCommissionDetailList()
					},600)
				} else{
					
				}
			}else{
				this.dataList[1].page = this.dataList[1].page + 1
				if (this.dataList[1].page <= this.dataList[1].pageTotal) {
					this.dataList[1].isLoadmore = true
					this.dataList[1].status = 'loading';
					setTimeout(()=>{
						this.getUserWithdrawRecordsList()
					},600)
				} else{
					
				}
			}
			
		},
	}
</script>

<style scoped lang="scss">
    .top{
    	width: 750rpx;
    	height: 360rpx;
    	background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_1691980195913787.png') no-repeat;
    	background-size: 100% 100%;
		padding: 0rpx 28rpx;
    }
	.top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 40rpx;
	}
	.top-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.top-left image{
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
	}
	.top-left text{
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 38rpx;
	}
	.top-image{
		width: 92rpx;
		height: 44rpx;
	}
	.top-num{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 50rpx;
	}
	.top-num-item{
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FEFEFE;
		line-height: 60rpx;
		text-shadow: 1px 1px 1px #7A97FD;
		white-space: pre-wrap;
	}
	.top-num-item text{
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FEFEFE;
		line-height: 60rpx;
		text-shadow: 1px 1px 1px #7A97FD;
		white-space: pre-wrap;
	}
	.category{
		padding: 50rpx 150rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.category-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.active-category-item-name{
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #323232;
		line-height: 44rpx;
	}
	.category-item-name{
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #323232;
		line-height: 44rpx;
	}
	.category-item image{
		width: 40rpx;
		height: 4rpx;
		margin-top: 20rpx;
	}
	.list{
		margin: 0rpx 28rpx;
		padding-bottom: 50rpx;
	}
	.list-item{
		padding: 36rpx 0rpx;
		border-bottom: 1rpx solid #E3E3E3;
	}
	.list-item-top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.list-item-top-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-item-top-left text{
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.list-item-top-left image{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}
	.list-item-bottom{
		padding-top: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.list-item-bottom-text{
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 24rpx;
	}
	.list-item-bottom-text1{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.list-item1{
		padding: 36rpx 0rpx;
		border-bottom: 1rpx solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.list-item-left{
		display: flex;
		flex-direction: column;
	}
	.list-item1-left-text{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.list-item-left-text1{
		padding-top: 24rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 24rpx;
	}
	.list-item-text{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		line-height: 38rpx;
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
</style>
